﻿<!DOCTYPE html>
<html>
    <head>
        <title>VatGM (Plus) - VATSIM and FSX flights information for Google Maps</title>
        <meta name="viewport" content="initial-scale=1, user-scalable=yes, width=device-width" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/Styles.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.23.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
        <script type="text/javascript" src="http://www.google.com/jsapi"> </script>
        <script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart'] }); </script>
        <script type="text/javascript" src="js/namespace/namespace.js" > </script>
        <script type="text/javascript" src="js/namespace/funcs.js"> </script>
        <script type="text/javascript" src="js/namespace/types.js"> </script>
        <script type="text/javascript" src="js/jscolor/jscolor.js"> </script>
        <script type="text/javascript" src="js/Infobox.js"> </script>
        <script type="text/javascript" src="js/ColorConversion.js"> </script>
        <script type="text/javascript" src="js/RgbColor.js"> </script>
        <script type="text/javascript" src="js/BrowserDetect.js"> </script>
        <script type="text/javascript" src="js/WorldMagneticModel.js"> </script>
        <script type="text/javascript" src="js/jquery/jQuery-1.8.1.js"> </script>
        <script type="text/javascript" src="js/jquery/jQuery-ui-1.8.23.custom.min.js"> </script>
        <script type="text/javascript" src="js/jquery/jQueryRotate.2.2.js"> </script>
        <script type="text/javascript" src="js/jquery/i18n/grid.locale-en.js"> </script>
        <script type="text/javascript" src="js/jquery/jQuery.jqGrid.src.js"> </script>
        <script type="text/javascript" src="js/log4javascript/log4javascript.js"> </script>
        <script type="text/javascript" src="jscripts/JsClassExtensions.js"> </script>
        <script type="text/javascript" src="js/Date.js"> </script>
        <script type="text/javascript" src="js/LatLon.js"> </script>
        <script type="text/javascript" src="jscripts/util/Utilities.js"> </script>
        <script type="text/javascript" src="jscripts/util/WebUtilities.js"> </script>
        <script type="text/javascript" src="jscripts/util/CalculationUtilities.js"> </script>
        <script type="text/javascript" src="jscripts/util/MapUtilities.js"> </script>
        <script type="text/javascript" src="jscripts/util/CollectingEvent.js"> </script>
        <script type="text/javascript" src="jscripts/util/RuntimeStatistics.js"> </script>
        <script type="text/javascript" src="jscripts/util/TimeDiff.js"> </script>
        <script type="text/javascript" src="jscripts/util/Semaphore.js"> </script>
        <script type="text/javascript" src="jscripts/entity/base/EntityList.js"> </script>
        <script type="text/javascript" src="jscripts/entity/base/EntityMapList.js"> </script>
        <script type="text/javascript" src="jscripts/entity/base/Styles.js"> </script>
        <script type="text/javascript" src="jscripts/entity/base/BaseEntityModel.js"> </script>
        <script type="text/javascript" src="jscripts/entity/base/BaseEntityMap.js"> </script>
        <script type="text/javascript" src="jscripts/entity/base/BaseEntityModelOnMap.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/AtcSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/Atc.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/Edge.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/Flightplan.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/RouteParser.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/GroundOverlays.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/Waypoint.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/Waypoints.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/VatsimMetar.js"> </script>
        <script type="text/javascript" src="jscripts/entity/helper/WaypointSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/Navaid.js"> </script>
        <script type="text/javascript" src="jscripts/entity/NavaidSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/FlightSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/Flight.js"> </script>
        <script type="text/javascript" src="jscripts/entity/FlightIconMapper.js"> </script>
        <script type="text/javascript" src="jscripts/entity/GroundOverlaySettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/GroundOverlay.js"> </script>
        <script type="text/javascript" src="jscripts/entity/AirportSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/Airport.js"> </script>
        <script type="text/javascript" src="jscripts/entity/NavaidSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/VatsimClients.js"> </script>
        <script type="text/javascript" src="jscripts/entity/FsxWs.js"> </script>
        <script type="text/javascript" src="jscripts/entity/FsxWsNavaids.js"> </script>
        <script type="text/javascript" src="jscripts/entity/RouteSettings.js"> </script>
        <script type="text/javascript" src="jscripts/entity/Route.js"> </script>
        <script type="text/javascript" src="jscripts/page/Globals.js"> </script>
        <script type="text/javascript" src="jscripts/page/PageController.js"> </script>
        <script type="text/javascript" src="jscripts/page/PageControllerSettings.js"> </script>
        <script type="text/javascript" src="jscripts/page/PageControllerDisplayAndLoad.js"> </script>
        <script type="text/javascript" src="jscripts/gm/OverlayGroup.js"> </script>
        <script type="text/javascript" src="jscripts/gm/Elevation.js"> </script>
        <script type="text/javascript" src="jscripts/gc/AltitudeProfile.js"> </script>
        <script type="text/javascript" src="jscripts/gc/AltitudeProfileSettings.js"> </script>
        <script type="text/javascript">
            // define namespaces
            var vd = namespace.vd;

            // Google Analytics
            var _gaq = _gaq || [];
            vd.util.UtilsWeb.initGoogleAnalytics();
            
            // page controller
            var ctr = new vd.page.PageController();

            // global
            var globals = new vd.page.Globals();

            // init page
            $(document).ready(function() { ctr.initialize(); });

            // close page
            $(window).unload(function() { ctr.close(); });
        </script>
        <noscript>Drawing VATSIM flights and ATC on Google Maps. This requires JavaScript enabled.</noscript>
    </head>
    <body>
        <div class="ui-widget">
            <div id="header">
                VatGM (plus) - VATSIM and FSX flights [Only for simulation] [<a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectReportBugs, true);">Bug reporting</a>] | [<a href="javascript:vd.util.UtilsWeb.newLocation('./DisplayIncludeDemo.htm', false);">Use with your website</a>]
            </div>
            <div id="headerBar" class="ui-widget-header">
                <select id="headerBarTabSelection" onchange=" ctr.showHideInputAndTabs() ">
                    <option selected="selected">Map</option>
                    <option>Entities</option>
                    <option>Settings</option>
                    <option>Data</option>
                    <option>Overlays</option>
                    <option>Navaids</option>
                    <option>Route</option>
                    <option>About</option>
                    <option>Credits</option>
                    <option>Hidden</option>
                </select>
                <!-- the first button also "catches" the first selected button action, so choose wisely -->
                <button class="ui-button" onclick=" ctr.refresh(true); " title="Refresh"><span class="ui-icon ui-icon-arrowrefresh-1-w" title="Refresh"></span></button>
                <button class="ui-button" onclick=" ctr.hideAllEntities(); " title="Clear"><span class="ui-icon ui-icon-circlesmall-minus" title="Clear"></span></button>
                <button class="ui-button" onclick=" ctr.triggerNewLoad(true); " title="Load"><span class="ui-icon ui-icon-document" title="Trigger load"></span></button>
                <button class="ui-button" onclick=" globals.resetEntities(); " title="Reset"><span class="ui-icon ui-icon-refresh" title="Reset"></span></button>
                <button class="ui-button" onclick=" ctr.filterSettingsChanged({ toogleFilter: true }); " title="Toggle filter"><span class="ui-icon ui-icon-shuffle" title="Toggle filter"></span></button>
                <button class="ui-button" onclick=" ctr.showLogger(); " title="Console"><span class="ui-icon ui-icon-newwin" title="Console, see settings for Level"></span></button>
                <button class="ui-button" onclick=" globals.flightSettings.displayMinimal(); ctr.refresh(); " title="Display minimal information"><span class="ui-icon ui-icon-arrow-1-sw" title="Display minimal information"></span></button>
                <button class="ui-button" onclick=" ctr.vatsimClientSettingsChanged(); " title="Display as set"><span class="ui-icon ui-icon-transfer-e-w" title="Display as set"></span></button>
                <button class="ui-button" onclick=" vd.util.UtilsWeb.newLocation(globals.urlUserManual, true); " title="User manual"><span class="ui-icon ui-icon-help" title="User manual"></span></button>
                <button class="ui-button" onclick=" vd.util.UtilsWeb.newLocation(globals.urlProjectLegalText, true); " title="Legal text / imprint"><span class="ui-icon ui-icon-info" title="Legal text / imprint"></span></button>
                &nbsp;
                <div id="headerBarTaskInfo">Loading...</div>
            </div>
            <!-- side bar starts here -->
            <div id="sideBar">
                <!-- tab map starts here -->
                <table id="sideBarLocation" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Info / Enable services
                        </th>
                    </tr>                   
                    <tr class="ui-widget-content sideBarTopAlign">
                        <td><a href="javascript:vd.util.UtilsWeb.newLocation(globals.vatsimClients.datafileTestProxy, true); ">Data file:</a></td>
                        <td colspan="2">
                            <div id="inputDatafileInfo">not read</div>
                        </td>
                        <td>
                            <button class="ui-button sideBarRightAlign" onclick=" vd.util.UtilsWeb.newLocation(globals.vatsimClients.datafile, true); " ><span class="ui-icon ui-icon-link" title="Show data file"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content sideBarTopAlign">
                        <td><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlFsxWsProject, true); ">FsxWs</a>:</td>
                        <td colspan="2"><div id="fsxWsURL">not set</div></td>
                        <td><button class="ui-button sideBarRightAlign" onclick=" ctr.refreshFsxWsInfo(); " ><span class="ui-icon ui-icon-link" title="Test connection"></span></button></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Data:</td>
                        <td colspan="3">
                            <label for="inputTimerUpdateVatsim">Vatsim</label>
                            <select id="inputTimerUpdateVatsim" onchange=" ctr.resetUpdateTimer(true); ">
                                <option value ="-1">off</option>
                                <option value ="30" selected="selected">30s</option>
                                <option value ="60">60s</option>
                            </select>
                            <label for="inputTimerUpdateFsx">FSX</label>
                            <select id="inputTimerUpdateFsx" onchange=" ctr.resetUpdateTimer(true); ">
                                <option value ="-1">off</option>
                                <option value ="2">02s</option>
                                <option value ="5" selected="selected">05s</option>
                                <option value ="10">10s</option>
                                <option value ="20">20s</option>
                                <option value ="30">30s</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            <label for="inputUsageMode">Usage</label>
                        </td>
                        <td colspan="3">
                            <select id="inputUsageMode" onchange=" ctr.usageModeChanged(); ">
                                <!-- values must match witch constants in PageController -->
                                <option value ="0" selected="selected">VATSIM and FSX</option>
                                <option value ="1">FSX mv.map+VATSIM data</option>
                                <option value ="2">FSX mv.map only</option>
                                <option value ="3">VATSIM only</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Location
                        </th>
                    </tr>
                    <tr class="ui-widget-content sideBarTopAlign">
                        <td>
                            Area:
                        </td>
                        <td id="locationMapBounds" colspan="3">
                            Map bounds
                        </td>
                    </tr>
                    <tr class="ui-widget-content sideBarTopAlign">
                        <td>
                            My place:
                        </td>
                        <td colspan="2">
                            <div id="inputGeoLocationInfo">undefined</div>
                        </td>
                        <td>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.gotoGeolocation(); " title="Go to my place"><span class="ui-icon ui-icon-check" title="Go to my place"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Place:
                        </td>
                        <td colspan="3">
                            <select id="inputPlaceSelect" onchange=" ctr.newPlace(true, vd.util.UtilsWeb.getSelectedValue('inputPlaceSelect'), 4); ">
                                <option selected="selected" value=""> </option>
                                <optgroup label="Africa" class="ui-widget-content">
                                    <option>North Africa</option>
                                    <option>South Africa</option>
                                </optgroup>
                                <optgroup label="America">
                                    <option>North America</option>
                                    <option>South America</option>
                                    <option>USA</option>
                                    <option>Canada</option>
                                </optgroup>
                                <optgroup label="Europe">
                                    <option>Central Europe</option>
                                    <option>Northern Europe</option>
                                    <option>Southern Europe</option>
                                    <option>United Kingdom</option>
                                    <option>Russia</option>
                                </optgroup>
                                <optgroup label="Asia">
                                    <option>China</option>
                                    <option>India</option>
                                    <option>Singapore</option>
                                    <option>Japan</option>
                                </optgroup>
                                <optgroup label="Australia">
                                    <option>Australia</option>
                                    <option>India</option>
                                    <option>Singapore</option>
                                    <option>Japan</option>
                                </optgroup>
                            </select>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td></td>
                        <td colspan="2">
                            <input name="place" id="inputPlace" type="text" size="16" onkeydown=" ctr.onEnter(event, function() { ctr.newPlace(true); }); "/>
                        </td>
                        <td>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.newPlace($('#inputPlace').val(), true); " title="Go to a new location"><span class="ui-icon ui-icon-check" title="Go to a new location"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Latitude:
                        </td>
                        <td>
                            <input name="latitude" id="inputLatitude" type="text" size="6" onkeydown=" ctr.onEnter(event, function() { ctr.newLocation(true); }); "/>
                        </td>
                        <td colspan="2">
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.addLatLngMarker() "title="Place a marker"><span class="ui-icon ui-icon-flag" title="Place a marker"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.reverseLookup() " title="Where is this?"><span class="ui-icon ui-icon-search" title="Where is this?"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Longitude:
                        </td>
                        <td>
                            <input name="longitude" id="inputLongitude" type="text" size="6" onkeydown=" ctr.onEnter(event, function() { ctr.newLocation(true); }); "/>
                        </td>
                        <td colspan="2">
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.removeLatLngMarkers() "title="Remove markers"><span class="ui-icon ui-icon-trash" title="Remove markers"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.newLocation(true) " onkeydown=" if (event.keyCode == 13) ctr.newLocation(true); "><span class="ui-icon ui-icon-check" title="Go to a new location"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">Elevation services</th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="3">Service (generally enable / disable):</td>
                        <td>
                            <input name="showProfile" id="inputElevationService" type="checkbox" onchange = " ctr.altitudeProfileSettings(); "/>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Alt.profile:</td>
                        <td>
                            <input name="showProfile" id="inputAltitudeProfileShow" type="checkbox" onchange = " ctr.altitudeProfileSettings(); "/>
                        </td>
                        <td>Elev.profile:</td>
                        <td>
                            <input name="elevationProfile" id="inputAltitudeProfileElevationLine" type="checkbox" onchange = " ctr.altitudeProfileSettings(); "/>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Follow / Filter on map
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Id:</td>
                        <td>
                            <input name="followId" id="inputFollowId" type="text" size="10" onkeydown=" ctr.onEnter(event, function() { ctr.followId(null); }); "/>
                        </td>
                        <td colspan="2">
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.selectTab('D', { gridHidden: false, atcGridHidden: true, detailsGridHidden: true, filtergriHidden: true }); " title="Show data"><span class="ui-icon ui-icon-link" title="Show data"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.followId(); " title="Follow"><span class="ui-icon ui-icon-check" title="Follow"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td></td>
                        <td colspan="2">
                            <div id="inputFollowedVatsimClient">Not followed.</div>
                        </td>
                        <td>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.followId(''); " title="End follow id"><span class="ui-icon ui-icon-trash" title="End follow id"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Apply&nbsp;filter:</td>
                        <td colspan="2">
                            <input name="applyFilter" id="inputApplyFilter" type="checkbox" onchange = " ctr.filterSettingsChanged(); "/>
                        </td>
                        <td>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.selectTab('D', { flightGridHidden: false, atcGridHidden: true, detailsGridHidden: true, filterGridHidden: false }); " title="Show filter data"><span class="ui-icon ui-icon-link" title="Show filter data"></span></button>
                        </td>
                    </tr>
                </table>
                <!-- tab map end here -->
                <!-- tab entities display starts here -->
                <table id="sideBarEntities" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">Flights</th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show Flights:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowFlight" id="inputFlightSettingsShowFlight" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Show on gnd:</td>
                        <td>
                            <input type="checkbox" name="OnGround" id="inputFlightSettingsOnGround" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Require flightplan:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="RequireFlightplan" id="inputFlightSettingsRequireFlightplan" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Height / m.dec.:</td>
                        <td>
                            <input type="checkbox" name="HeightAndDeclination" id="inputFlightSettingsHeightAndDeclination" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Callsign:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="Callsign" id="inputFlightSettingsCallsign" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Pilot:</td>
                        <td>
                            <input type="checkbox" name="Pilot" id="inputFlightSettingsPilot" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Id:</td>
                        <td>
                            <input type="checkbox" name="FlightId" id="inputFlightSettingsId" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Transponder:</td>
                        <td>
                            <input type="checkbox" name="Transponder" id="inputFlightSettingsTransponder" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Speed, alt.,hdg.:</td>
                        <td>
                            <input type="checkbox" name="SpeedAltHeading" id="inputFlightSettingsSpeedAltitudeHeading" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Aircraft:</td>
                        <td><input type="checkbox" checked="checked" name="Aircraft" id="inputFlightSettingsAircraft" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Flight waypoints
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Waypoints:</td>
                        <td><input type="checkbox" name="WaypointsFlight" id="inputWaypointSettingsFlight" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                        <td>Wp.-Lines:</td>
                        <td><input type="checkbox" checked="checked" name="WaypointLines" id="inputFlightSettingsWaypointLines" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Wp.-Callsign:</td>
                        <td><input type="checkbox" checked="checked" name="WaypointsFlightCallsign" id="inputWaypointSettingsFlightCallsign" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                        <td>Wp.-Speed, Alt.</td>
                        <td><input type="checkbox" name="WaypointsFlightSpeedAltitudeHeading" id="inputWaypointSettingsFlightSpeedAltitudeHeading" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Max. waypoints:</td>
                        <td colspan="2">
                            <select name="FlightWaypointsMaxNumber" id="inputWaypointSettingsFlightMaxNumber" onchange=" ctr.vatsimClientSettingsChanged() ">
                                <option>5</option>
                                <option>10</option>
                                <option>25</option>
                                <option>50</option>
                                <option>100</option>
                                <option>all</option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Airports
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show Airports</td>
                        <td><input type="checkbox" checked="checked" name="ShowAirports" id="inputAirportSettingsShowAirport" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                        <td>Show Vicinity:</td>
                        <td><input type="checkbox" name="ShowVicinity" id="inputAirportSettingsVicinity" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show METAR:</td>
                        <td><input type="checkbox" checked="checked" name="ShowMetar" id="inputAirportSettingsMetar" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                        <td>Show ATIS:</td>
                        <td><input type="checkbox" checked="checked" name="ShowAtis" id="inputAirportSettingsAtis" onchange=" ctr.vatsimClientSettingsChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            ATC
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Show ATC:
                        </td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowATC" id="inputAtcSettingsShowAtc" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>
                            Callsign:
                        </td>
                        <td>
                            <input type="checkbox" checked="checked" name="Callsign" id="inputAtcSettingsCallsign" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Controller:
                        </td>
                        <td>
                            <input type="checkbox" checked="checked" name="Controller" id="inputAtcSettingsController" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>
                            Id:
                        </td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowAtcId" id="inputAtcSettingsId" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Observer:</td>
                        <td>
                            <!-- value considered (PageController), not editable -->
                            <input type="checkbox" disabled="disabled" name="ShowObserver" id="inputAtcSettingsObserver" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Area Ctr.:</td>
                        <td>
                            <!-- value considered (PageController), not editable -->
                            <input type="checkbox" disabled="disabled" checked="checked" name="ShowAreaAtc" id="inputAtcSettingsAreaAtc" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Route
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Airway:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowRouteAirway" id="inputRouteSettingsAirway" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>Distance:</td>
                        <td>
                            <input type="checkbox" name="ShowRouteDistance" id="inputRouteSettingsDistance" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Frequency:</td>
                        <td>
                            <input type="checkbox" name="ShowRouteFrequency" id="inputRouteSettingsFrequency" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                        <td>True course:</td>
                        <td>
                            <input type="checkbox" name="ShowRouteTC" id="inputRouteSettingsCourse" onchange=" ctr.vatsimClientSettingsChanged() " />
                        </td>
                    </tr>
                </table>
                <!-- tab entities display ends here -->
                <!-- tab settings starts here -->
                <table id="sideBarSettings" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            General
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Distance:
                        </td>
                        <td>
                            <select id="inputSettingsDistance" class="sideBarRightAlign" onchange=" ctr.unitsChanged() ">
                                <option selected="selected">km</option>
                                <option>nm</option>
                            </select>
                        </td>
                        <td>
                            Altitude:
                        </td>
                        <td>
                            <select id="inputSettingsAltitude" class="sideBarRightAlign" onchange=" ctr.unitsChanged() ">
                                <option>ft</option>
                                <option>m</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            This application
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Log.level (console):</td>
                        <td colspan="2">
                            <select id="inputSettingsLogLevel" class="sideBarRightAlign" onchange=" ctr.logLevelChanged() ">
                                <!-- options will be set in init -->
                            </select>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="3">Check console pop up:</td>
                        <td colspan="1"><button class="ui-button sideBarRightAlign" onclick=" globals.log.fatal('Test message testing the console'); globals.logAppenderPopUp.show(); "><span class="ui-icon ui-icon-newwin" title="Is console working?"></span></button></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="3">Trace locks (semaphores):</td>
                        <td colspan="1"><input class="sideBarRightAlign" type="checkbox" name="TraceLocks" id="inputTraceLocks" onchange=" ctr.logLevelChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="3">Trace aircraft icon mapping:</td>
                        <td colspan="1"><input class="sideBarRightAlign" type="checkbox" name="TraceAircraftIconMapping" id="inputTraceAircraftIconMapping" onchange=" ctr.logLevelChanged() " /></td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">FSX web services</th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Location:</td>
                        <td colspan="2"><input name="fsxWsLocation" id="inputFsxWsLocation" type="text" size="20"/></td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Port:</td>
                        <td colspan="2">
                            <input name="fsxWsPort"id="inputFsxWsPort" type="text" size="5"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.fsxWsSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Layout
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Flight labels:</td>
                        <td colspan="2">
                            <input name="flightLabelsColor" id="inputFlightSettingLabelsColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">.. followed:</td>
                        <td colspan="2">
                            <input name="flightLabelsColorIfFollowed" id="inputFlightSettingLabelsColorIfFollowed" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                            <input type="checkbox" id="inputFlightSettingLabelsColorIfFollowedTransparent" onchange=" ctr.colorSettingsChanged(); " /><label for="inputFlightSettingLabelsColorIfFollowedTransparent">trn.</label>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">.. filtered:</td>
                        <td colspan="2">
                            <input name="flightLabelsColorIfFiltered" id="inputFlightSettingLabelsColorIfFiltered" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                            <input type="checkbox" id="inputFlightSettingLabelsColorIfFilteredTransparent" onchange=" ctr.colorSettingsChanged(); " /><label for="inputFlightSettingLabelsColorIfFilteredTransparent">trn.</label>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">
                            Flight labels font:
                        </td>
                        <td colspan="2">
                            <input name="flightLabelsFontColor" id="inputFlightSettingLabelsFontColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">
                            Airport labels:
                        </td>
                        <td colspan="2">
                            <input name="airportLabelsColor" id="inputAirportSettingLabelsColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">
                            Airport labels font:
                        </td>
                        <td colspan="2">
                            <input name="airportLabelsFontColor" id="inputAirportSettingLabelsFontColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Wp.-Lines:</td>
                        <td colspan="2">
                            <input name="waypointLinesColor" id="inputFlightSettingsWaypointLinesColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">0 - FL30</td>
                        <td colspan="2">
                            <!-- colour gradient will go here -->
                            <canvas width="125" height="15" id="inputFlightWaypointsLegend"></canvas>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Route labels:</td>
                        <td colspan="3">
                            <input name="routeLabelsFontColor" id="inputRouteSettingLabelsColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Route labels font:</td>
                        <td colspan="2">
                            <input name="routeLabelsFontColor" id="inputRouteSettingLabelsFontColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">Route:</td>
                        <td colspan="2">
                            <input name="routeColor" id="inputRouteSettingRouteLineColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td colspan="2">
                            Navaid labels:
                        </td>
                        <td colspan="2">
                            <input name="navaidLabelsColor" id="inputNavaidSettingLabelsColor" onkeydown=" ctr.onEnter(event, 'ctr.colorSettingsChanged()'); " class="color" type="text" size="8"/>
                            <input type="checkbox" id="inputNavaidSettingLabelsColorTransparent" onchange=" ctr.colorSettingsChanged(); " />transp.
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.colorSettingsChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                </table>
                <!-- tab settings ends here -->
                <!-- tab data (flight/atc) starts here -->
                <table id="sideBarData" class="sideBarStandard, sideBarGrids">
                    <tr>
                        <td>
                            <a href="javascript:ctr.updateGrids(true);">Update data</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <!-- details grid will go here -->
                            <table id="detailsData"></table>
                        </td>
                    </tr>
                    <tr>
                        <td id="sideBarFlightData">
                            <table id="flightData"></table>
                            <div id="flightDataPager" onmouseover=" ctr.gridMouseState(true, null); " onmouseout=" ctr.gridMouseState(false, null); "></div>
                        </td>
                    </tr>
                    <tr>
                        <td id="sideBarAtcData">
                            <table id="atcData"></table>
                            <div id="atcDataPager" onmouseover=" ctr.gridMouseState(null, true); " onmouseout=" ctr.gridMouseState(null, false); "></div>
                        </td>
                    </tr>
                    <tr>
                        <td id="sideBarFilterData">
                            <table id="filterData"></table>
                            <div id="filterDataPager"></div>
                        </td>
                    </tr>
                </table>
                <!-- tab data (flight/atc) ends here -->
                <!-- overlay start -->
                <table id="sideBarOverlays" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="2" class="sideBarHeader">
                            Overlays
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Airport:
                        </td>
                        <td>
                            <select id="inputGroundOverlaysAirport" class="sideBarGroundOverlaySelect" onchange=" ctr.loadOverlayChartList(); "></select>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.loadOverlayChartList(); " title="Refresh chart list"><span class="ui-icon ui-icon-arrowrefresh-1-e" title="Refresh chart list"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Charts:</td>
                        <td>
                            <select id="inputGroundOverlaysAirportCharts" class="sideBarGroundOverlaySelect" onchange=" ctr.displayOverlayChart(); "></select>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.displayOverlayChart(); " title="Display ground overlay"><span class="ui-icon ui-icon-plus" title="Display ground overlay"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td></td>
                        <td>
                            <a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectProvideCharts, true); ">Providing charts</a>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.removeOverlayChart(); " title="Hide ground overlay"><span class="ui-icon ui-icon-minus" title="Hide ground overlay"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.zoomToGroundOverlay(); " title="Zoom to ground overlay"><span class="ui-icon ui-icon-zoomin" title="Zoom to ground overlay"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="2" class="sideBarHeader">
                            About
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Details:</td>
                        <td>
                            <a id="inputGroundOverlayDetails" href= "javascript:vd.util.UtilsWeb.newLocation(ctr.groundOverlayDisplayed.infoUrl);">Further info</a>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Chart:</td>
                        <td>
                            <a id="inputGroundOverlayChartLatestVersion" href= "javascript:vd.util.UtilsWeb.newLocation(ctr.groundOverlayDisplayed.originalChartUrl);">Latest version</a>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="2" class="sideBarHeader">
                            Ground overlay setup
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Background:</td>
                        <td>
                            <input name="groundOverlayBackgroundColor" id="inputGroundOverlayBackgroundColor" onkeydown=" ctr.onEnter(event, 'ctr.groundOverlayChanged()'); " class="color" type="text" size="8"/>
                            <input type="checkbox" id="inputGroundOverlayBackgroundTransparent" onchange=" ctr.groundOverlayChanged(); " />transp.
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.groundOverlayChanged(); "><span class="ui-icon ui-icon-check"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Opacity:</td>
                        <td>
                            <select id="inputGroundOverlayOpacity" onchange=" ctr.groundOverlayChanged(); "></select>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Rotate:</td>
                        <td>
                            <input name="groundOverlayRotate" id="inputGroundOverlayRotate" onkeydown=" ctr.onEnter(event, 'ctr.groundOverlayChanged()'); " type="text" size="4"/>
                        </td>
                    </tr>
                </table>
                <!-- overlay end -->
                <!-- navaids start -->
                <table id="sideBarNavaids" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">FsxWs</th>
                    </tr>
                    <tr class="ui-widget-content sideBarTopAlign">
                        <td>Status:</td>
                        <td colspan="3">
                            <div id="fsxWsNavaidStatus">not set</div>
                        </td>
                    </tr>
                    <tr class="ui-widget-content sideBarTopAlign" id="fsxWsNavaidsLoad">
                        <td>Data:</td>
                        <td colspan="3">
                            <a href="javascript:ctr.loadAndDisplayNavaids();">Load Navaids</a>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="4" class="sideBarHeader">
                            Display Navaids
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show VORs:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowVORs" id="inputNavaidsDisplayVOR" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                        <td>Show NDBs:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowNDBs" id="inputNavaidsDisplayNDB" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show&nbsp;TACANs:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowTACANs" id="inputNavaidsDisplayTACAN" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                        <td>Show VORTACs:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowVORTACs" id="inputNavaidsDisplayVORTAC" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show ILS:</td>
                        <td>
                            <input type="checkbox" name="ShowILS" id="inputNavaidsDisplayILS" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                        <td>Show Navaids:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowNavaids" id="inputNavaidsDisplay" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show name:</td>
                        <td>
                            <input type="checkbox" name="ShowNavaidsName" id="inputNavaidsDisplayName" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                        <td>
                            Callsign:
                        </td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowNavaidsCallsign" id="inputNavaidsDisplayCallsign" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>Show freq.:</td>
                        <td>
                            <input type="checkbox" checked="checked" name="ShowNavaidsFrequency" id="inputNavaidsDisplayFrequency" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                        <td>Show type:</td>
                        <td>
                            <input type="checkbox" name="ShowNavaidsType" id="inputNavaidsDisplayType" onchange=" ctr.navaidSettingsChanged() " />
                        </td>
                    </tr>
                </table>                
                <!-- navaids end -->
                <!-- route start -->
                <table id="sideBarRoute" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="2" class="sideBarHeader">
                            VATroute
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            <button class="ui-button sideBarRightAlign" onclick=" vd.util.UtilsWeb.newLocation(globals.urlVATroute, true); " title="VATroute"><span class="ui-icon ui-icon-extlink" title="VATroute"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.vatsimClientSettingsChanged({ toggleFlights: true }); " title="Toggle flights visibility"><span class="ui-icon ui-icon-shuffle" title="Toggle flights visibility"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.hideRoute(); " title="Hide route"><span class="ui-icon ui-icon-cancel" title="Hide route"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.loadVatRouteDemoData(); " title="Demo data"><span class="ui-icon ui-icon-document" title="Demo data"></span></button>
                            <button class="ui-button sideBarRightAlign" onclick=" ctr.showVatRoute(); " title="Display route"><span class="ui-icon ui-icon-circle-arrow-e" title="Display route"></span></button>
                        </td>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            <textarea id="inputVatRoute" rows="5" cols="40" title="Paste your VATroute here" class="sideBarRouteInput">Paste your VATRoute here.</textarea>                                
                        </td>
                    </tr>
                </table>
                <!-- route end -->
                <!-- about start -->
                <table id="sideBarAbout" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th colspan="2" class="sideBarHeader">
                            Version / Statistics
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            <ul>
                                <li id="vatGmVersion"></li>
                                <li><a href="javascript:vd.util.RuntimeStatistics.logAll(); ctr.showLogger();">Show runtime statistics</a> in the console.</li>
                            </ul>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th colspan="2" class="sideBarHeader">
                            Getting involved
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            <ul>
                                <li><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectGettingInvolved, true); ">This software (join ..)</a></li>
                                <li><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlFsxWsProject, true); ">FsxWs</a></li>
                                <li><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectFeatureRequests, true); ">Feature requests</a></li>
                                <li><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectReportBugs, true); ">Report bugs or typos</a>.<br/>Please read corresponding<br/>section in the <a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlUserManual, true); ">user manual</a>.</li>
                                <li><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectProvideCharts, true); ">Provide charts</a></li>
                            </ul>
                        </td>
                    </tr>
                    <tr class="ui-widget-header">
                        <th class="sideBarHeader">
                            Legal
                        </th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            <ul>
                                <li><a href="javascript:vd.util.UtilsWeb.newLocation(globals.urlProjectLegalText, true);">Legal information including license</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
                <!-- about end -->
                <!-- credits start -->
                <table id="sideBarCredits" class="sideBarStandard">
                    <tr class="ui-widget-header">
                        <th class="sideBarHeader">Maps and Data:</th>
                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>Based on Google maps. Copyright on the bottom line of the map (TerraMetrics, Google, NASA, Tele Atlas et.al.).</li>
                                <li>Flight data based on <a href="javascript: vd.util.UtilsWeb.newLocation('http://www.vatsim.net/', true);">VATSIM.</a></li>
                                <li>FMC data need to be <a href="javascript: vd.util.UtilsWeb.newLocation('http://vatgm.codeplex.com/wikipage?title=Legal', true);">licensed</a>.</li>
                            </ul>
                        </td>                    
                    </tr>
                    <tr class="ui-widget-header">
                        <th class="sideBarHeader">Related:</th>
                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>FSX JSON data <a href="javascript: vd.util.UtilsWeb.newLocation('http://fsxws.codeplex.com/', true);">FsxWs</a>.</li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://ssg.codeplex.com/', true);">SSG</a> (KML, ESE, SCT).</li>
                            </ul>
                        </td>                    
                    </tr>
                    <tr class="ui-widget-header">
                        <th class="sideBarHeader">Libraries:</th>
                    </tr>
                    <tr class="ui-widget-content">
                        <td>
                            Fundamentals:
                            <ul>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://code.google.com/apis/maps/documentation/javascript/reference.html#Map', true);">Google Maps API</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://code.google.com/apis/chart/', true);">Google Charts</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://jquery.com/', true);">JQuery</a></li> 
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://jqueryui.com/', true);">JQuery UI</a></li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Others:
                            <ul>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://www.trirand.com/blog/', true);">jQuery Grid (jqGrid)</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://code.google.com/p/jqueryrotate/', true);">JQueryRotate</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html', true);">Infobox</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('https://github.com/mckoss/namespace', true);">JS Namespace</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://www.bdcc.co.uk/Gmaps/Services.htm', true); ">Library</a> for <a href="javascript: vd.util.UtilsWeb.newLocation('http://www.ngdc.noaa.gov/geomag/WMM/DoDWMM.shtmlNOAA', true);">World Magnetic Model</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://www.movable-type.co.uk/scripts/latlong.html', true);">Lat/Lon Calculations</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://www.JavascriptToolbox.com', true);">Javascript Toolbox</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript', true);">Color model conversion</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://jscolor.com/try.php', true);">jscolor Color Picker</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://log4javascript.org/docs/quickstart.html', true);">log4javascript</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('https://github.com/micmath/jsdoc', true);">JsDoc3</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://appendto.com/community/jquery-vsdoc', true);">jQuery Intellisense</a></li>
                                <li><a href="javascript: vd.util.UtilsWeb.newLocation('http://blog.stevenlevithan.com/archives/parseuri', true);">Uri Parser (by SL)</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
                <!-- credits end -->
            </div>
        </div>
        <!-- side bar ends here -->
        <div id="mapAltitudeProfile"></div>
        <div id="mapCanvas"></div>
    </body>
</html>